import React, { useState } from 'react';
import './Huabu7Login.css';
import { Layout } from 'antd';
import SidebarMenu from '../yingyong/SidebarMenu';
import AppHeader from '../yingyong/AppHeader';

interface Huabu7LoginProps {
  onLoginSuccess: () => void;
}

const Huabu7Login: React.FC<Huabu7LoginProps> = ({ onLoginSuccess }) => {
  const [passwordVisible, setPasswordVisible] = useState(false);

  const togglePasswordVisibility = () => {
    setPasswordVisible(!passwordVisible);
  };

  const handleLogin = (e: React.FormEvent) => {
    e.preventDefault();
    // Add your login logic here. If login is successful, call onLoginSuccess.
    onLoginSuccess();
  };

  return (
    <>
      <div className="login-background-content">
        <Layout className="app-layout">
          <AppHeader />
          <Layout>
            <SidebarMenu />
          </Layout>
        </Layout>
      </div>
      <div className="login-container">
        <div className="login-overlay"></div> {/* 用于暗化背景 */}
        <div className="login-box">
          <span className="login-close-btn" onClick={() => {}}>&times;</span>
          <h1>🎉开启您的创新之旅</h1>
          <br />
          <form onSubmit={handleLogin}>
            <div className="login-input-group">
              <label htmlFor="account" className="login-label">账号</label>
              <input type="text" id="account" className="login-input" placeholder="请输入账号" />
            </div>
            <div className="login-input-group login-password-container">
              <label htmlFor="password" className="login-label">密码</label>
              <input
                type={passwordVisible ? "text" : "password"}
                id="password"
                className="login-input"
                placeholder="请输入密码"
              />
              <a href="#" className="login-forgot-password">忘记密码?</a>
            </div>
            <button type="submit" className="login-button">登录</button>
          </form>
          <a href="#" className="login-register-link">注册账号</a>
        </div>
      </div>
    </>
  );
};

export default Huabu7Login;
